<template>
  <v-dialog
    v-model="dialogVisible"
    max-width="800"
    persistent
    scrollable
  >
    <v-card v-if="instance">
      <v-card-title class="d-flex align-center justify-space-between">
        <span>审批详情</span>
        <v-btn icon="mdi-close" variant="text" @click="close" />
      </v-card-title>

      <v-divider />

      <v-card-text class="pa-0">
        <v-tabs v-model="activeTab" bg-color="transparent">
          <v-tab value="basic">基本信息</v-tab>
          <v-tab value="history">审批历史</v-tab>
          <v-tab value="form">表单数据</v-tab>
        </v-tabs>

        <v-tabs-window v-model="activeTab">
          <!-- 基本信息 -->
          <v-tabs-window-item value="basic">
            <v-card-text>
              <v-row>
                <v-col cols="12" md="6">
                  <v-text-field
                    label="申请标题"
                    :model-value="instance.title"
                    readonly
                    variant="outlined"
                    density="compact"
                  />
                </v-col>
                <v-col cols="12" md="6">
                  <v-text-field
                    label="业务类型"
                    :model-value="getBusinessTypeText(instance.businessType)"
                    readonly
                    variant="outlined"
                    density="compact"
                  />
                </v-col>
                <v-col cols="12" md="6">
                  <v-text-field
                    label="申请人"
                    :model-value="instance.applicantName"
                    readonly
                    variant="outlined"
                    density="compact"
                  />
                </v-col>
                <v-col cols="12" md="6">
                  <v-text-field
                    label="状态"
                    readonly
                    variant="outlined"
                    density="compact"
                  >
                    <template v-slot:append-inner>
                      <v-chip
                        :color="getStatusColor(instance.status)"
                        size="small"
                        variant="tonal"
                      >
                        {{ getStatusText(instance.status) }}
                      </v-chip>
                    </template>
                  </v-text-field>
                </v-col>
                <v-col cols="12" md="6">
                  <v-text-field
                    label="申请时间"
                    :model-value="formatDate(instance.applyTime)"
                    readonly
                    variant="outlined"
                    density="compact"
                  />
                </v-col>
                <v-col cols="12" md="6">
                  <v-text-field
                    label="完成时间"
                    :model-value="instance.finishTime ? formatDate(instance.finishTime) : '未完成'"
                    readonly
                    variant="outlined"
                    density="compact"
                  />
                </v-col>
                <v-col cols="12">
                  <v-text-field
                    label="当前节点"
                    :model-value="instance.currentNode || '流程已结束'"
                    readonly
                    variant="outlined"
                    density="compact"
                  />
                </v-col>
                <v-col cols="12" v-if="instance.remark">
                  <v-textarea
                    label="备注"
                    :model-value="instance.remark"
                    readonly
                    variant="outlined"
                    rows="3"
                  />
                </v-col>
              </v-row>
            </v-card-text>
          </v-tabs-window-item>

          <!-- 审批历史 -->
          <v-tabs-window-item value="history">
            <v-card-text>
              <ApprovalHistoryTimeline :instance-id="instance.id!" />
            </v-card-text>
          </v-tabs-window-item>

          <!-- 表单数据 -->
          <v-tabs-window-item value="form">
            <v-card-text>
              <ApprovalFormData :form-data="instance.formData" />
            </v-card-text>
          </v-tabs-window-item>
        </v-tabs-window>
      </v-card-text>

      <v-divider />

      <v-card-actions>
        <v-spacer />
        <v-btn color="grey" variant="text" @click="close">
          关闭
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { format } from 'date-fns';
import type { ApprovalInstanceModel } from '@/api/approval/instance/ApprovalInstanceApi';
import ApprovalHistoryTimeline from './ApprovalHistoryTimeline.vue';
import ApprovalFormData from './ApprovalFormData.vue';

// Props
interface Props {
  modelValue: boolean;
  instance: ApprovalInstanceModel | null;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean];
  'refresh': [];
}>();

// 响应式数据
const activeTab = ref('basic');

// 计算属性
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
});

// 监听实例变化，重置标签页
watch(() => props.instance, () => {
  activeTab.value = 'basic';
});

// 获取业务类型文本
function getBusinessTypeText(businessType: string | undefined): string {
  switch (businessType) {
    case 'contract':
      return '合同审批';
    case 'gift_course':
      return '礼品课程';
    case 'refund':
      return '退费申请';
    default:
      return businessType || '未知';
  }
}

// 获取状态颜色
function getStatusColor(status: string | undefined): string {
  switch (status) {
    case 'PENDING':
      return 'warning';
    case 'APPROVED':
      return 'success';
    case 'REJECTED':
      return 'error';
    case 'CANCELLED':
      return 'grey';
    default:
      return 'grey';
  }
}

// 获取状态文本
function getStatusText(status: string | undefined): string {
  switch (status) {
    case 'PENDING':
      return '待审批';
    case 'APPROVED':
      return '已通过';
    case 'REJECTED':
      return '已拒绝';
    case 'CANCELLED':
      return '已取消';
    default:
      return '未知';
  }
}

// 格式化日期
function formatDate(date: string | Date | undefined): string {
  if (!date) return '-';
  return format(new Date(date), 'yyyy-MM-dd HH:mm:ss');
}

// 关闭弹窗
function close() {
  dialogVisible.value = false;
}
</script>

<style scoped>
.v-card-title {
  padding: 16px 24px;
  border-bottom: 1px solid rgb(var(--v-theme-surface-variant));
}

.v-card-actions {
  padding: 16px 24px;
}
</style> 